<template>
    <div class="order">
         <header>
            <span class="glyphicon glyphicon-menu-left"></span>
            <span>订单</span>
            <span>其他</span>
        </header>
        <!-- 历史订单 -->
        <div class="title">历史订单</div>
        <div class="content">
            <div class="contentA" v-for="n in num" :key="n">
                <div class="one">
                    <img src="../../../static/icon/timg.jpg" alt="">
                    <div class="center">
                        <p>杨记正宗四果汤四果汤
                            <span class="glyphicon glyphicon-menu-right" style="font-size:0.5rem;color:gray"></span>
                            </p>
                        <span class="date">2018-07-28 21:18</span>
                    </div>
                    <span class="right">订单已送达</span>
                </div>
                 <div class="two">
                     <div class="center">
                        <p style="font-size: .46875rem">大份四果汤(850cc)加料</p>
                    </div>
                     <span class="right">￥15.6</span>
                 </div>

            </div>
        </div>

       
        
    </div>
    
</template>
<script>
export default {
    data(){
        return {
            num:6
        }
    }
}

    
</script>
<style scoped>
p{
    margin: 0px;
    padding: 0px;
   
}

header{
    width: 100%;
    height: 1.875rem /* 30/16 */;
    background-color: rgb(30, 164, 253);
    text-align: center;
    line-height: 1.875rem ;
    color: white;
    font-size: .75rem /* 12/16 */;
    position: fixed;
    top: 0px;
    font-weight: 600;
    z-index: 100;
}
header span:nth-child(1){
    /* margin-left: 5/16; */
    position: absolute;
    left: .3125rem ;
    top:.625rem /* 10/16 */;
}
header span:nth-child(3){
    position: absolute;
    right: .3125rem ;
    /* top:.625rem 10/16; */
}
div.title{
    width: 100%;
    /* height: 1.25rem 20/16; */
    line-height: 1.25rem /* 20/16 */;
    /* border:  1px solid black; */
    margin-top: 1.875rem /* 30/16 */;
    font-size: .75rem /* 12/16 */;
    font-weight: 600;
    padding: .3125rem /* 5/16 */;
    background-color: white;
}
.content{
    width: 100%;
    margin-bottom: 3.75rem /* 60/16 */;
    padding: .375rem /* 6/16 */;
    background-color: white;
}
.content .contentA{
    width: 100%;
    height: 3.75rem /* 60/16 */;
    border-bottom: .0625rem /* 1/16 */ solid rgb(236, 233, 233);
   
}
.content .contentA .one{
    width: 100%;
    height: 1.875rem /* 30/16 */;
    /* background-color: aqua; */
     position: relative;
     margin-top: .3125rem /* 5/16 */;
}
.content .contentA .one img{
   width: 12%;
    position: absolute;
    left: .3125rem /* 5/16 */;
}
.content .contentA .two{
    width: 100%;
    height: 1.875rem /* 30/16 */;
    /* background-color:palevioletred; */
    position: relative;
}
.content .contentA .center{
    position: absolute;
    width: 60%;
    height: 100%;
    /* background-color: aqua; */
     /* padding: .15625rem 2.5/16; */
     /* border: 1px solid black; */
     left:15%;
}
.content .contentA .center .date{
    color: gray;
    font-size: .4375rem /* 7/16 */;
    
}
.content .contentA .right{
    position: absolute;
    right: .3125rem /* 5/16 */;
    font-size: .5rem /* 8/16 */;
}
.content .contentA .two .center{
    line-height: 1.875rem /* 30/16 */;
}
.content .contentA .two .right{
    line-height: 1.875rem /* 30/16 */;
}




    
</style>